<template>
  <n-modal
    v-model:show="showModal"
    preset="card"
    negative-text="取消"
    size="small"
    style="width: 500px"
  >
    <template #header>
      {{ is_create ? "创建" : "编辑" }}
      <n-text depth="3"> #{{ badge.id }} </n-text>
      &nbsp;
      <n-tag :type="badge.type">
        {{ badge.name ? badge.name : "示例标签" }} | ∞
      </n-tag>
    </template>
    <template #footer>
      <n-space v-if="is_create" justify="end"
        ><n-button type="success" dashed @click="createBadge"
          >创建</n-button
        ></n-space
      >
      <n-space v-else justify="space-between">
        <n-button type="error" dashed disabled>删除</n-button>
        <n-button type="info" dashed @click="updateBadge">更新</n-button>
      </n-space>
    </template>
    <n-form label-placement="left" label-width="auto">
      <n-form-item label="名称" path="badge.name">
        <n-input placeholder="标签名称" v-model:value="badge.name"></n-input>
      </n-form-item>

      <n-form-item label="颜色" path="badge.color">
        <n-select v-model:value="badge.type" :options="options" />
      </n-form-item>
      <n-form-item label="简介" path="badge.brief">
        <n-input placeholder="标签说明" v-model:value="badge.brief"></n-input>
      </n-form-item>

      <!-- TODO: 支持图片上传 -->
    </n-form>
  </n-modal>
</template>

<script>
import { NModal, NSelect, useMessage } from "naive-ui";
import { ref } from "vue";
import { useStore } from "vuex";
import submitData from "@/composables/SubmitData";
export default {
  props: {
    id: {
      // 传入要求改的id -1为创建
      type: Number,
      required: true,
      default: -1,
    },
  },
  components: {
    NModal,
    NSelect,
  },
  setup() {
    const store = useStore();
    const message = useMessage();

    const options = ref([
      {
        label: "灰",
        value: "",
      },
      {
        label: "绿",
        value: "success",
      },
      {
        label: "橙",
        value: "warning",
      },
      {
        label: "红",
        value: "error",
      },
      {
        label: "蓝",
        value: "info",
      },
    ]);
    let is_create = ref(true);
    let showModal = ref(false);
    let badge = ref({
      name: "",
      brief: "",
      icon: "",
      photo: "",
      type: "",
    });

    const { create_badge, update_badge } = submitData(store.state.user.id);
    /**
     * 创建请求
     */

    const createBadge = () => {
      create_badge(badge)
        .then(() => {
          message.success("创建成功");
          store.dispatch("getBadges", {
            success() {
              message.success(`同步标签成功`);
            },
          });
          showModal.value = false;
        })
        .catch((error) => {
          message.error(`创建标签失败 ${JSON.stringify(error.response.data)}`);
        });
    };
    /**
     * 更新请求
     */
    const updateBadge = () => {
      console.log("更新");

      update_badge(badge.value.id, badge)
        .then(() => {
          message.success("更新成功");
          store.dispatch("getBadges", {
            success() {
              message.success(`同步标签成功`);
            },
          });
          showModal.value = false;
        })
        .catch((error) => {
          console.log(error);
          message.error(`更新标签失败 ${JSON.stringify(error.response.data)}`);
        });
    };

    const getBadgeData = (id) => {
      /**
       * 注入 相依id的内容 [外部调用]
       */
      is_create.value = id == -1;
      if (is_create.value) {
        badge.value = {
          name: "",
          brief: "",
          icon: "",
          photo: "",
          type: "",
        };
        return;
      }
      badge.value = JSON.parse(JSON.stringify(store.state.badge.dirt[id]));
    };
    return {
      is_create,
      showModal,
      badge,
      options,
      createBadge,
      getBadgeData,
      updateBadge,
    };
  },
};
</script>

<style>
</style>